<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学生列表</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<style>
/* 页面特定样式 */
.student-table {
    margin-top: 20px;
}
.filter-panel {
    margin-bottom: 20px;
}
.filter-row {
    margin-bottom: 15px;
}
.operation-col {
    width: 180px;
}
.table-responsive {
    overflow-x: auto;
}
.pagination-container {
    text-align: center;
    margin-top: 20px;
}
.search-btn {
    margin-left: 15px;
}
</style>
</head>

<body>
    <div class="place">
        <ul class="place-nav">
            <li class="place-label">位置：</li>
            <li><a href="admin_index.html" target="rightFrame">首页</a></li>
            <li>学生列表</li>
        </ul>
    </div>
    
    <div class="admin-panel filter-panel">
        <h3>查询条件</h3>
        <form class="form-horizontal" id="searchForm">
            <div class="row filter-row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">学号：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="studentId" placeholder="请输入学号">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">姓名：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">性别：</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="gender">
                                <option value="">全部</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row filter-row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">院系：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="college" placeholder="请输入院系">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">专业：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="major" placeholder="请输入专业">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">班级：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="className" placeholder="请输入班级">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12 text-center">
                    <button type="button" class="btn btn-primary" onclick="searchStudents()">查询</button>
                    <button type="button" class="btn btn-default" onclick="resetForm()">重置</button>
                    <button type="button" class="btn btn-success search-btn" onclick="window.location.href='admin_student_add.html'">添加学生</button>
                </div>
            </div>
        </form>
    </div>
    
    <div class="admin-panel">
        <h3>学生列表</h3>
        <div class="table-responsive">
            <table class="table table-striped table-hover student-table">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>院系</th>
                        <th>专业</th>
                        <th>班级</th>
                        <th>联系电话</th>
                        <th class="operation-col">操作</th>
                    </tr>
                </thead>
                <tbody id="studentTableBody">
                    <!-- 学生列表数据将通过JavaScript动态添加 -->
                </tbody>
            </table>
        </div>
        
        <div class="pagination-container">
            <ul id="pagination" class="pagination">
                <!-- 分页导航将通过JavaScript动态添加 -->
            </ul>
        </div>
    </div>

<script>
// 当前页码
var currentPage = 1;
// 每页记录数
var pageSize = 10;
// 总记录数
var totalRecords = 0;
// 总页数
var totalPages = 1;

// 页面加载完成后执行
$(function(){
    // 加载学生列表
    loadStudentList(1);
});

// 加载学生列表
function loadStudentList(page) {
    if(page) {
        currentPage = page;
    }
    
    // 获取查询条件
    var name = $("#name").val();
    
    // 发送AJAX请求获取学生列表数据
    $.ajax({
        url: "students",
        type: "GET",
        data: {
            name: name,
            page: currentPage,
            size: pageSize
        },
        dataType: "json",
        success: function(response) {
            if(response.code == 200) {
                // 渲染学生列表
                renderStudentList(response.data);
                
                // 更新分页信息
                totalPages = response.totalPages;
                renderPagination();
            } else {
                // 处理错误情况
                $("#studentTableBody").html('<tr><td colspan="8" class="text-center">获取数据失败：' + response.msg + '</td></tr>');
                $("#pagination").empty();
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX请求失败：", error);
            
            // 显示错误信息
            $("#studentTableBody").html('<tr><td colspan="8" class="text-center">获取数据失败，请稍后重试</td></tr>');
            $("#pagination").empty();
            
            // 如果接口不可用，使用模拟数据进行展示
            renderMockData();
        }
    });
}

// 渲染学生列表
function renderStudentList(students) {
    var html = '';
    
    if(students && students.length > 0) {
        for(var i = 0; i < students.length; i++) {
            var student = students[i];
            html += '<tr>';
            html += '<td>' + (student.studentId || '') + '</td>';
            html += '<td>' + (student.name || '') + '</td>';
            html += '<td>' + (student.gender || '') + '</td>';
            html += '<td>' + (student.college || '') + '</td>';
            html += '<td>' + (student.major || '') + '</td>';
            html += '<td>' + (student.className || '') + '</td>';
            html += '<td>' + (student.phone || '') + '</td>';
            html += '<td>';
            html += '<button type="button" class="btn btn-xs btn-info" onclick="viewStudent(\'' + student.studentId + '\')">查看</button> ';
            html += '<button type="button" class="btn btn-xs btn-primary" onclick="editStudent(\'' + student.studentId + '\')">编辑</button> ';
            html += '<button type="button" class="btn btn-xs btn-danger" onclick="deleteStudent(\'' + student.studentId + '\')">删除</button>';
            html += '</td>';
            html += '</tr>';
        }
    } else {
        html = '<tr><td colspan="8" class="text-center">暂无数据</td></tr>';
    }
    
    $("#studentTableBody").html(html);
}

// 渲染分页导航
function renderPagination() {
    var html = '';
    
    // 上一页
    html += '<li class="' + (currentPage <= 1 ? 'disabled' : '') + '">';
    html += '<a href="javascript:void(0);" onclick="' + (currentPage <= 1 ? '' : 'loadStudentList(' + (currentPage - 1) + ')') + '" aria-label="Previous">';
    html += '<span aria-hidden="true">&laquo;</span>';
    html += '</a></li>';
    
    // 页码
    for(var i = 1; i <= totalPages; i++) {
        if(i == currentPage) {
            html += '<li class="active"><a href="javascript:void(0);">' + i + '</a></li>';
        } else {
            html += '<li><a href="javascript:void(0);" onclick="loadStudentList(' + i + ')">' + i + '</a></li>';
        }
    }
    
    // 下一页
    html += '<li class="' + (currentPage >= totalPages ? 'disabled' : '') + '">';
    html += '<a href="javascript:void(0);" onclick="' + (currentPage >= totalPages ? '' : 'loadStudentList(' + (currentPage + 1) + ')') + '" aria-label="Next">';
    html += '<span aria-hidden="true">&raquo;</span>';
    html += '</a></li>';
    
    $("#pagination").html(html);
}

// 查询学生
function searchStudents() {
    currentPage = 1;
    loadStudentList();
}

// 重置表单
function resetForm() {
    $("#searchForm")[0].reset();
    searchStudents();
}

// 查看学生
function viewStudent(studentId) {
    alert("查看学生：" + studentId);
    // 实际应用中，这里应该跳转到学生详情页
}

// 编辑学生
function editStudent(studentId) {
    window.location.href = "admin_student_edit.html?id=" + studentId;
}

// 删除学生
function deleteStudent(studentId) {
    if(confirm("确定要删除学号为 " + studentId + " 的学生吗？")) {
        // 发送AJAX请求到后端进行删除操作
        $.ajax({
            url: "deleteStudent",
            type: "POST",
            data: {
                studentId: studentId
            },
            dataType: "json",
            success: function(response) {
                if(response.code == 200) {
                    // 删除成功
                    alert("删除成功！");
                    // 重新加载当前页数据
                    loadStudentList(currentPage);
                } else {
                    // 删除失败
                    alert("删除失败：" + response.msg);
                }
            },
            error: function(xhr, status, error) {
                console.error("删除请求失败：", error);
                alert("操作失败，请稍后重试");
            }
        });
    }
}

// 渲染模拟数据（当后端接口不可用时使用）
function renderMockData() {
    // 模拟学生数据
    var mockStudents = [];
    for(var i = 1; i <= 15; i++) {
        mockStudents.push({
            studentId: "2023" + (i < 10 ? "0" + i : i),
            name: "学生" + i,
            gender: i % 2 === 0 ? "女" : "男",
            college: "计算机学院",
            major: "软件工程",
            className: "软工" + (i % 3 + 1) + "班",
            phone: "138" + (10000000 + i)
        });
    }
    
    // 模拟数据分页
    totalRecords = mockStudents.length;
    totalPages = Math.ceil(totalRecords / pageSize);
    
    var start = (currentPage - 1) * pageSize;
    var end = Math.min(start + pageSize, totalRecords);
    var pageData = mockStudents.slice(start, end);
    
    renderStudentList(pageData);
    renderPagination();
}
</script>
</body>
</html> 